<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 600px 600px 600px;
            grid-template-rows: 600px;
        }

        .container div {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <button onclick="resetImg()">清除</button>
    <button onclick="lockImg()">锁定</button>
    <div class="container">
        <div><img src="" alt=""></div>
        <div><img src="" alt=""></div>
        <div><img src="" alt=""></div>
        <div><img src="" alt=""></div>
        <div><img src="" alt=""></div>
        <div><img src="" alt=""></div>
    </div>
    <script>
        var imgPlusUrl = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596042509410&di=b3288d71134a17157eb69acb4dd841a5&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F03%2F04%2F69%2F5af7f7bb54447_610.jpg";
        var imgs = [];
        var addImg = 'add-img';
        var lock = false;
        var initWidth = 600;

        var container = document.querySelector('.container');
        async function getImgData() {
            return new Promise((resolve, reject) => {
                var file = document.createElement('input');
                file.type = 'file';
                file.onchange = function () {
                    var files = file.files;
                    if (files.length === 0) {
                        resolve(null);
                        return;
                    }
                    var fileReader = new FileReader();
                    fileReader.readAsDataURL(files[0]);
                    fileReader.onload = () => resolve(fileReader.result);
                }
                file.click();
            })
        }

        document.body.addEventListener('click', async function (e) {
            var img = e.target;
            if (img.classList.contains(addImg)) {
                var data = await getImgData(img);
                if (!data) return;
                img.src = data;
                img.classList.remove(addImg);
                img.style.top = 0;
                img.style.left = 0;
                img.zoomWidth = img.width;
                console.dir(img)
            }
        })

        document.onmousedown = function (e) {
            var img = e.target;
            if (img.classList.contains(addImg)) return;
            var mImg = lock ? imgs : [img];
            mImg.forEach(ele => {
                ele.style.position = 'relative';
                ele.position_left = parseFloat(ele.style.left);
                ele.position_top = parseFloat(ele.style.top);
            });
            var pageX = e.pageX;
            var pageY = e.pageY;
            document.onmousemove = function (e2) {
                var px = e2.pageX - pageX;
                var py = e2.pageY - pageY;
                mImg.forEach(ele => {
                    if (ele.classList.contains(addImg)) return;
                    ele.style.left = ele.position_left + px + 'px';
                    ele.style.top = ele.position_top + py + 'px';
                })
            }
        }
        document.onmouseup = function (e) {
            document.onmousemove = null;
        }
        container.onwheel = function (e) {
            var img = e.target;
            if (img.classList.contains(addImg)) return;
            var sollorNum = event.wheelDelta / 12;
            e.preventDefault();
            var mImg = lock ? imgs : [img];
            mImg.forEach(ele => {
                if (ele.classList.contains(addImg)) return;
                ele.zoom = ele.zoom || 0;
                ele.zoom += sollorNum;
                if (ele.zoom > 100) ele.zoom = 100;
                if (ele.zoom < -50) ele.zoom = -50;
                ele.width = ele.zoomWidth * (1 + ele.zoom / 100);
            })
        }
        function resetImg() {
            document.querySelectorAll("img").forEach((ele, i) => {
                ele.src = imgPlusUrl;
                ele.ondragstart = () => false;
                ele.classList.add(addImg);
                imgs[i] = ele;
                ele.style='';
                ele.width = initWidth;
            });
        }
        function lockImg() {
            lock = !lock;
        }
        resetImg();
    </script>
</body>

</html>